import React,{useRef,useEffect} from 'react';
import * as echarts from 'echarts';
import {get} from "../../../service";
function LineChart(props) {
    const ref =useRef()
    useEffect(()=>{
        const echart= echarts.init(ref.current)
        const options = {
            tooltip:{
                show:true,
                trigger:'axis'
            },
            grid:{
                left:10,
                bottom:10,
                top:40,
                containLabel:true //计算坐标和内容位置
            },
            yAxis:[
                {name:'成交量'},
                {name:'成交额'}
            ],
            xAxis:{
                type:'category',//类型为类目
                splitLine:{show:false},//不显示网格线
            },
            series:[
                {
                    name:'成交量',
                    type:'line',//折线图
                    smooth:true,//平滑曲线
                    showSymbol:false,//不显示点
                    itemStyle:{
                        color:'#73c0de'
                    }
                },
                {
                    name:'成交额',
                    type:'line',//折线图
                    smooth:true,//平滑曲线
                    showSymbol:false,//不显示点
                    itemStyle:{
                        color:'red'
                    },
                    yAxisIndex:1,
                    datasetIndex:1
                }
            ]
        }
        echart.setOption(options)
        window.addEventListener('resize',()=>{
            echart.resize()
        })
        Promise.all([get('/api/overview/salestrend',{type:1}),get('/api/overview/salestrend',{type:2})]).then(res=>{
            echart.setOption({
                dataset:[
                    {source:res[0].records},
                    {source:res[1].records}
                ]
            })
        })
    },[])
    return (
        <div ref={ref} style={{height:'100%'}}></div>
    );
}

export default LineChart;